<template>
	<view>
		<u-tabs :list="list" :is-scroll="true" font-size="40" :current="current" @change="change"></u-tabs>
		<u-swiper :list="hots" height="350" :title="true"></u-swiper>
		<u-grid :col="2" :border="false">
			<u-grid-item class="list" v-for="item in 2" @click="showLive()">
				<u-image width="100%" mode="widthFix" src="/static/demo.jpg" border-radius="10"></u-image>
				<view class="hotIcon">
					热播
				</view>
				<view class="grid-addres">
					山东 青岛
				</view>
				<view class="grid-title">
					二神直播中...
				</view>
				<view class="grid-people">
					2000
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '热门'
				}, {
					name: '推荐'
				}, {
					name: '附近'
				}, {
					name: '新秀'
				}, {
					name: '颜值'
				}, {
					name: '舞蹈'
				}],
				current: 0,
				hots: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {
	
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(index)
			},
			showLive(){
				uni.redirectTo({
					url: '/pages/live/appplay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding: 20rpx;
	}
	.hotIcon{
		margin-top: -350rpx;
		margin-left: -240rpx;
		z-index: 99;
		color: #FFFFFF;
		background-color: #dd6161;
		padding: 5rpx 20rpx;
		border-radius: 5rpx;
		opacity: 0.8;
	}
	.grid-addres{
		z-index: 99;
		color: #FFFFFF;
		margin-top: 200rpx;
		margin-left: -200rpx;
	}
	.grid-title{
		z-index: 99;
		color: #FFFFFF;
		margin-left: -150rpx;
		font-weight: bold;
	}
	.grid-people{
		z-index: 99;
		color: #FFFFFF;
		margin-left: 240rpx;
		margin-top: -40rpx;
		background-color: #606266;
		padding: 5rpx 20rpx;
		border-radius: 5rpx;
		opacity: 0.8;
	}
</style>

